<template>
  <!-- 风能 -->
  <div>
    <el-container>
      <el-header>
        <el-row style="float: left;">
          <el-button type="primary">模板下载</el-button>
          <el-button type="primary">数据上传</el-button>
        </el-row>
        <el-row>
          <el-col :span="24">
            <table border="2" width="100%" style="margin-top: 20px;">
              <tr>
                <th>1月</th>
                <th>2月</th>
                <th>3月</th>
                <th>4月</th>
                <th>5月</th>
                <th>6月</th>
                <th>7月</th>
                <th>8月</th>
                <th>9月</th>
                <th>10月</th>
                <th>11月</th>
                <th>12月</th>
              </tr>
              <tr>
                <td>{{table.month1}}</td>
                <td>{{table.month2}}</td>
                <td>{{table.month3}}</td>
                <td>{{table.month4}}</td>
                <td>{{table.month5}}</td>
                <td>{{table.month6}}</td>
                <td>{{table.month7}}</td>
                <td>{{table.month8}}</td>
                <td>{{table.month9}}</td>
                <td>{{table.month10}}</td>
                <td>{{table.month11}}</td>
                <td>{{table.month12}}</td>
              </tr>
            </table>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <el-row style="float: left;margin-top: 100px;color: white;">
          <span>风速图表</span>
        </el-row>
        <el-row style="margin-top: 100px;">
          <el-col :span="24">
            <div id="myChart"
            style="width: 100%;height: 480px;"></div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
  export default {
    data (){
      return {
        project_id: this.$root.project_id,
        table: {
          month1: ''
        },
        xdata: [],
        winddata: []
      }
    },
    mounted() {
      this.$http.get('/iepsapi/resource/getSolarData?project_id='+this.project_id).then((res) => {
        var result = res.data.data;
        this.xdata = result.windXdata
        this.winddata = result.winddata
        this.drawLine();
      }).catch((error) => {
        console.log(error);
      });
    },
    methods: {
      drawLine(){
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
            title: {},
            tooltip: {trigger: 'axis'},
            legend: {
              top: '5%',
              icon: 'rect',
              textStyle: {
                color: '#fff'
              },
            },
            textStyle: {
              color: '#ffffff'
            },
            xAxis: {
              type: 'category',
              data: this.xdata
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              name: '风速(单位:千米/秒)',
              type: 'line',
              data: this.winddata,
              smooth: true
            }]
        });
      }
    }
  }
</script>

<style scoped="scoped">
  th{
    color: white;
    text-align: center;
  }
  td{
    color: white;
    height: 30px;
  }
</style>
